<template>
    <div>
        <van-nav-bar title="文章详情" fixed placeholder safe-area-inset-top left-arrow @click-left="$router.back()" />
        <div class="article-wrap">
            <h3 class="title">{{detailInfo.title}}</h3>
            <div class="aut_info">
                <van-image width="60" height="60" round fit="contain" :src="detailInfo.aut_photo"></van-image>
                <div class="info">
                    <div class="name">{{detailInfo.aut_name}}</div>
                    <div class="time">{{detailInfo.pubdate | relvTime}}</div>
                </div>
                <div>
                    <van-button icon="plus" round type="info">关注</van-button>
                </div>
            </div>
            <div ref="content" class="content" v-html="detailInfo.content"></div>
            <van-divider>end</van-divider>
            <div class="btn-wrap">
                <van-button color="#07c160" round plain type="info">
                    <van-icon name="good-job-o" />点赞
                </van-button>
                <div style="width: 30px;"></div>
                <van-button color="#ee0a24" round plain type="info">
                    <van-icon name="delete-o" />不喜欢
                </van-button>
            </div>
        </div>

        <div class="comment">
            <article-comment></article-comment>
        </div>
    </div>
</template>

<script>
    import {
        articleDetailAPI
    } from '@/api'
import ArticleComment from './articleComment.vue';
    export default {
        components: {ArticleComment},
        props: {},
        data() {
            return {
                id: this.$route.params.id,
                detailInfo: {},
                testmsg: '<h1 class="h1">你好</h1>'
            };
        },
        computed: {},
        watch: {},
        async created() {
            let res = await articleDetailAPI(this.id)
            this.detailInfo = res.data.data
            console.log(this.detailInfo);
        },
        mounted() {},
        methods: {},
    }
</script>
<style scoped lang="less">
    .article-wrap {
        padding: 0px 8px;

        .title {
            font-size: 24px;
            margin: 12px 0;
        }

        .aut_info {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .info {
                margin-left: 8px;
                flex: 1 1 0%;

                .name {
                    font-size: 16px;
                    font-weight: 500;
                }

                .time {
                    font-size: 14px;
                    color: grey;
                }
            }
        }

        .content {
            overflow-wrap: break-word;
            white-space: pre;
            overflow: hidden;

            ::v-deep {
                pre {
                    width: 100%;
                    overflow: auto;
                    background-color: #000;
                    color: lightblue;
                }

                img {
                    width: 100%;
                }

                p {
                    word-break: break-all;
                }

            }
        }

        .btn-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            .van-button{
                width: 120px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .van-icon{
                    font-size: 16px;
                }
            }
        }
    }

    .h1 {
        font-size: 60px;
    }
</style>